<template>
    <!-- 左侧导航栏 -->
    <el-tree
        ref="treeRef"
        class="base_tree"
        :data="props.treeData"
        :props="defaultProps"
        :default-expand-all="true"
        node-key="id"
        @node-click="chooseGroup">
        <template #default="{ node }">
            <el-tooltip class="box-item" :disabled="disabled" :content="node.label" effect="light" placement="left">
                <span class="grouping_tooltip_label" @mouseenter="handleMouse($event)">{{ node.label }}</span>
            </el-tooltip>
        </template>
    </el-tree>
</template>

<script setup lang="ts">
import { ref, watch, reactive, computed, onMounted } from 'vue';
import { ElTree } from 'element-plus';
import { isTextBeyond } from '@/utils/utils';
const treeRef = ref<InstanceType<typeof ElTree>>();
const emit = defineEmits(['submit']);
const props = defineProps(['treeData']);
interface Tree {
    id: number;
    name: string;
    children?: Tree[];
}
// 1-文本 2-图片 3-音频 4-视频 5-文件 6-链接文章 7-链接引用 8-朋友圈素材
const defaultProps = {
    checkStrictly: true,
    emitPath: false,
    children: 'children',
    label: 'name',
    value: 'id'
};

const disabled = ref(true);
const handleMouse = (e: any) => {
    disabled.value = isTextBeyond(e);
};

const chooseGroup = (value: any) => {
    treeRef.value!.setCheckedKeys([value], false);
    emit('submit', value.id);
};

watch(
    () => props.treeData,
    val => {
        let id = 0;
        if (val?.length) {
            if (val[0]?.children?.length) {
                id = val[0].children[0].id;
            } else {
                id = val[0].id;
            }
        }
        treeRef.value!.setCheckedKeys([id], false);
    }
);
</script>

<style lang="scss" scoped>
.base_tree {
    margin-top: 10px;

    :deep .el-tree-node__expand-icon {
        color: #ff6b00;
    }

    :deep .el-tree-node {
        &.is-checked {
            .el-tree-node__content {
                background: #fff1e8;
            }
        }

        &.is-current {
            .el-tree-node__content {
                background: #fff1e8;
            }
        }

        .el-tree-node__content {
            width: 170px;

            &.is-focusable {
                background: #fffaf9;
            }

            &:hover {
                background: #fffaf9;
            }
        }
    }

    :deep .el-tree {
        --el-tree-node-hover-bg-color: #fffaf9;
    }
}

.grouping_tooltip_label {
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
